<template>
  <view class="about">
    <canvas canvas-id="bubble" :style="'width:' + width + 'px;height:' + height + 'px'" class="like-fx"></canvas>
    <like-fx ref="likeFx" :width="width" :height="height"></like-fx>

    <view
      class="titleZ text-center align-center"
      style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"
    >
      <text class="text-bold">友情提示</text>
      <view class="contentZ">
        <text class="text-xl">当前后端服务器开小差了, 请稍后再打开app查看~</text>
      </view>
      <view class="contentZ margin-top-lg">
        <text class="text-xl">该页面会自动获取后端服务状态, 服务正常则自动跳转页面~</text>
      </view>
      <view class="contentZ margin-top-lg">
        <text class="text-xl">如果总是停在页面, 可以联系duiduo询问下情况~</text>
      </view>
      <view class="contentZ margin-top-lg">
        <text @tap="callPhoneNumber" class="text-xl">点击拨打联系电话『13835318823』</text>
      </view>
    </view>
  </view>
</template>

<script>
import LikeFx from '@/components/likeFx.vue'
import { ServerStatusEnum } from '@/common/constants.js'
export default {
  components: {
    LikeFx
  },
  data() {
    return {
      animation_timer: null, // 动画定时器
      width: 375,
      height: 1920,
      serverTimer: null //定时器名称
    }
  },
  async onLoad() {
    this.setTime()
  },
  methods: {
    //拨打固定电话
    callPhoneNumber() {
      uni.makePhoneCall({
        phoneNumber: '13835318823'
      })
    },
    // 开启定时器
    setTime() {
      var _this = this
      this.serverTimer = setInterval(() => {
        _this.getInfo()
      }, 5000)
    },
    // 清除定时器
    beforeDestroy() {
      clearInterval(this.serverTimer)
      this.serverTimer = null
    },
    getInfo() {
      // 获取未读消息数量 随便触发一个请求 获取最新的 serverStatus 服务状态
      this.$u.api.unReadMessageCount()
      // 等待1s结果返回
      // setTimeout(() => {}, 1000)
      // 获取服务状态
      const serverStatus = uni.getStorageSync('serverStatus')

      // 跳转登录页
      if (parseInt(serverStatus) === ServerStatusEnum.SUCCESS_FOR_LOGIN) {
        console.log('Fail To Login')
        this.beforeDestroy() // 清除定时器
        setTimeout(() => {
          this.$u.route({
            type: 'reLaunch',
            url: '/pages/auth/login'
          })
        }, 500)
      } else if (parseInt(serverStatus) === ServerStatusEnum.SUCCESS_FOR_INDEX) {
        console.log('Fail To Index')
        this.beforeDestroy() // 清除定时器
        setTimeout(() => {
          this.$u.route({
            type: 'reLaunch',
            url: '/pages/index/index'
          })
        }, 500)
      }
    }
  }
}
</script>

<style>
.titleZ {
  width: 750rpx;
  font-size: 52rpx;
}
.contentZ {
  width: 650rpx;
  margin: 60rpx auto 0;
  text-align: left;
}
.about-bg {
  background-size: cover;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  flex-direction: column;
  color: #fff;
}

.edit-fixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}

.detail-imgs image {
  width: 100%;
  float: left;
  /* height:400rpx; 不定高了*/
  border: 0;
  padding: 0;
  margin: 0;
}

.share-img {
  position: fixed;
  padding: 10rpx;
  width: 100rpx;
  height: 100rpx;
  /* top: 680rpx; */
  bottom: 200rpx;
  right: 20rpx;
  z-index: 1024;
  opacity: 0.8;
  box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
  border: none;
}

.about {
  margin: 0;
  width: 100%;
  height: 100vh;
  padding-top: 20%;
  color: #fff;
  background: linear-gradient(-120deg, #f15bb5, #9a5ce5, #01beff, #00f5d4);
  /* background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a); */
  background-size: 500% 500%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.container {
  width: 100%;
  position: absolute;
  text-align: center;
}

.like-fx {
  position: fixed;
  right: 0;
  z-index: 1024;
  pointer-events: none;
  /* background-color: red; */
}
</style>
